<template>
	<view class="mon-body-box">
		<scroll-view :refresher-enabled="isOpenRefresh" scroll-y="true" style="hight: 100vh"
			refresher-background="#1c213a" :refresher-triggered="triggered" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"
			refresher-default-style="none" :refresher-threshold="0" scroll-anchoring="true" v-if="reload">
			<view v-if="show" class="loading">
				<view class="loadingThree">
					<text></text>
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
			</view>
			<view v-if="show2" class="releaseLoading">
				<view class="text"> 释放刷新 </view>
			</view>
			<u-list @scrolltolower="scrolltolower" v-if="monList.length != 0">
				<view class="list_duck">
					<u-list-item v-for="(item, index) in monList" :key="item.id">
						<view class="min_ducklist">
							<view class="duck_image">
								<!-- 背景图 -->
								<image @click="Details(item.id)" :src="imgUrl + item.baseImg" mode="" class="imgsos">
								</image>
								<image v-if="item.isLock == 1" :src="imgUrl+'/static/images/shudan.png'" class="lock" mode=""
									@click="getInfo"></image>
								<view class="eggEndTime">
									<u-count-down :time="item.eggEndTime" format="HH:mm:ss"></u-count-down>
								</view>
							</view>
							<view class="duck_buttom">
								<view class="num">
									编号：
									<text style="color: #46a6f8">#{{ item.number }}</text>
								</view>
								<view class="price">￥{{ item.price.toFixed(2) }}</view>
							</view>
						</view>
					</u-list-item>
				</view>
			</u-list>
			<view v-if="monList.length == 0">
					<image style="
					width: 280rpx;
					height: 280rpx;
					margin: 275rpx 220rpx 0;
					" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</scroll-view>
		<realname v-if="isDialogVisible" @closeDialog="closeDialog"></realname>
	</view>
</template>
<script>
import { getUserAdmin } from '@/utils/auth.js';
import { getMonList, getCollection, getMonEgg } from '@/api/work/market.js';
import config from '@/config.js';
import realname from '../../components/real/realname.vue';
export default {
	components: {
		realname
	},
	data() {
		return {
			reload:false,
			isDialogVisible: true,
			triggered: false, //当下下拉状态 true：启动刷新  false：刷新没有触发
			isOpenRefresh: true, // 是否开启下拉
			show: false, //加载中动画
			show2: false, // 释放刷新动画
			name: 'monEgg',
			imgUrl: config.gillUrl,
			set_classList: [],
			isDropdownOpen: false,
			dropdownTitle: '请选择',
			dropdownItems: ['MoN', '时之沙', '道具', '土地', '饰品'],
			obj: {
				breedNums: '',
				indexs: [0],
				mature: 0,
				pageNum: 1,
				pageSize: 10,
				races: '',
				types: ''
			},
			monList: [],
			total: ''
		};
	},
	created() {
		this.getMonList();
	},
	onLoad() {
		this._freshing = false;
		this.triggered = 'restore'; // 需要重置
	},
	onShow(){
		this.reload = false
		this.$nextTick(()=>{
			this.reload = true
		})
	},
	methods: {
		closeDialog() {
			this.isDialogVisible = false;
		},
		// 自定义下拉刷新控件被下拉
		onPulling(e) {
			if (e.detail.deltaY <= 0) {
				// 防止上滑页面也触发下拉
				return;
			}
			if (e.detail.deltaY > 100) {
				// 下拉到指定位置 才触发刷新
				this.show2 = true;
			}
		},
		// 自定义下拉刷新被触发
		async onRefresh(e) {
			if (!this.show2) return; // 判断是否触发刷新
			this.show2 = false; // 触发刷新 关闭释放刷新动画
			if (this._freshing) return;
			this.triggered = true; // 启动刷新
			this._freshing = true;
			this.show = true; // 加载中动画显示
			try {
				await this.getMonList(true); // 在这里调用获取新的列表数据的方法
			} catch (error) {
				console.error('refresh failed', error);
			} finally {
				this.closeRefresh(); // 当数据获取完毕后，关闭下拉刷新
			}
		},
		closeRefresh() {
			// 关闭刷新
			this.triggered = false; // 关闭刷新
			this._freshing = false;
			setTimeout(() => {
				this.show = false; // 加载动画关闭
				this.triggered = 'restore'; // 需要重置
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 500
				});
			}, 1000);
		},
		// 自定义下拉刷新被复位
		onRestore() {
			this.triggered = 'restore'; // 需要重置
		},
		// 自定义下拉刷新被中止
		onAbort() {
			this.triggered = 'restore'; // 需要重置
			this._freshing = false;
			this.show2 = false;
		},

		async getMonList(isRefresh) {
			if (isRefresh) {
				this.monList = []; // 清空列表
				this.obj.pageNum = 1; // 重置页码
			}
			const res = await getMonList(this.obj);
			this.total = res.data.total;
			let _this = this;
			res.data.res.forEach((item) => {
				_this.monList.push(item);
			});
		},
		scrolltolower() {
			if (this.monList.length < this.total) {
				this.obj.pageNum++;
				this.getMonList();
			} else {
				return;
			}
		},
		async Details(id, mature = 1) {
			let userDetail = await getUserAdmin();
			if (userDetail.isRealName !== 1) {
				this.isDialogVisible = true;
			} else {
				const res = await getCollection(id);
				if (res.code === 200) {
					uni.navigateTo({
						url: '/pages/MarketOrder/Details?id=' + id + '&isParents=2' + '&raceFlag=' + mature //跳转到目标页面的路径 萌宝详情页
					});
				}
			}
		},

		change(e) {},
		toggleDropdown() {
			this.isDropdownOpen = !this.isDropdownOpen;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .u-count-down__text {
	color: #fff !important;
	font-size: 24rpx;
}

.mon-body-box {
	padding: 0 34.88rpx;

	.releaseLoading {
		position: relative;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		font-size: 32rpx;
		font-family: 'font';
		background-color: rgba(0, 0, 0, 0);

		.text {
			width: 680rpx;
			top: -70rpx;
			left: 0;
			position: absolute;
		}
	}

	.loading {
		z-index: 1;
		padding-bottom: 80rpx;
		background-color: rgba(0, 0, 0, 0);
		height: 50rpx;
		position: relative;

		.loadingThree {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			background-color: rgba(0, 0, 0, 0);
		}

		.loadingThree text {
			display: inline-block;
			width: 15rpx;
			height: 15rpx;
			margin-right: 5rpx;
			border-radius: 50%;
			background: #46a6f8;
			-webkit-animation: load 1.04s ease infinite;
		}

		.loadingThree text:last-child {
			margin-right: 0rpx;
		}

		@-webkit-keyframes load {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		.loadingThree text:nth-child(1) {
			-webkit-animation-delay: 0.13s;
		}

		.loadingThree text:nth-child(2) {
			-webkit-animation-delay: 0.26s;
		}

		.loadingThree text:nth-child(3) {
			-webkit-animation-delay: 0.39s;
		}

		.loadingThree text:nth-child(4) {
			-webkit-animation-delay: 0.52s;
		}

		.loadingThree text:nth-child(5) {
			-webkit-animation-delay: 0.65s;
		}
	}

	.list_duck {
		width: 680rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.min_ducklist {
			width: 318rpx;
			height: 408rpx;
			margin-bottom: 45.35rpx;
			border-radius: 9rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		.duck_image {
			position: relative;
			width: 316rpx;
			height: 316rpx;
			border-top: 1rpx solid #3c424d;
			border-left: 1rpx solid #3c424d;
			border-right: 1rpx solid #3c424d;
			border-radius: 9rpx 9rpx 0rpx 0rpx;

			image {
				width: 316rpx;
				height: 316rpx;
				background: #648bd8;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
			}

			.lock {
				width: 316rpx;
				height: 316rpx;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
				position: absolute;
				z-index: 100;
				left: 0;
				opacity: 0.6;
			}

			.eggEndTime {
				top: 15rpx;
				left: 20rpx;
				z-index: 1;
				position: absolute;
				display: flex;
				align-items: center;
				height: 10rpx;
				font-weight: 800;
				border-radius: 9rpx;
				padding: 20rpx 10rpx 18rpx 10rpx;
				background: rgba(40, 44, 52, 0.8);
			}
		}

		.duck_buttom {
			width: 316rpx;
			height: 110rpx;
			background: #211f30;
			position: relative;
			border-bottom: 1rpx solid #3c424d;
			border-left: 1rpx solid #3c424d;
			border-right: 1rpx solid #3c424d;
			border-radius: 0rpx 0rpx 9rpx 9rpx;

			.num {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 500;
				color: #8a92a3;
			}

			.price {
				color: #ffffff;
				bottom: 15rpx;
				right: 20rpx;
				font-size: 24rpx;
				font-family: 'font';
				font-weight: 500;
				position: absolute;
			}
		}
	}
}
</style>
